<template>
  <div class="container">
    <div
      :class="className"
      ref="chart"
      :style="{ height: height, width: width }"
    />
    <div class="info-div">
      <div class="info-top">
        <span>{{   chartData   }}</span>
        <span>分</span>
        <span>{{
          chartData >= 80
            ? "优"
            : chartData >= 60 && chartData < 80
            ? "良"
            : chartData >= 40 && chartData <=60
            ? "中"
            : "差"
        }}</span>
      </div>
      <div class="info-bottom">
        <img src="@/assets/myself_img/icon_gauge2.png" />
        <span>能力值</span>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions() {
      console.log(this.chart);
      this.chart.setOption({
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            center: ["50%", "90%"],
            radius: "120%",
            // detail: {
            //   formatter: "{value}%",
            // },
            data: [
              {
                value: this.chartData,
                // name: "完成率",
              },
            ],
            axisLine: {
              show: true,
              lineStyle: {
                color: [
                  [
                    1,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0.1,
                        color: "#FFC600",
                      },
                      {
                        offset: 0.3,
                        color: "#0B95FF",
                      },
                      {
                        offset: 0.7,
                        color: "#0B95FF",
                      },
                      {
                        offset: 1,
                        color: "#30D27C",
                      },
                    ]),
                  ],
                ],
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  height: 100%;
  width: 100%;
  .info-div {
    position: absolute;
    left: 50px;
    top: 30px;
    .info-top {
      display: flex;
      height: 60px;
      align-items: center;
      span:nth-child(1) {
        font-size: 24px;
        font-family: DINPro;
        font-weight: 500;
        color: #2e3440;
      }
      span:nth-child(2) {
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #8c93a3;
        padding: 0 5px;
      }
      span:nth-child(3) {
        padding: 3px;
        background: #ecf8ff;
        border: 1px solid #9edbff;
        border-radius: 5px;
        font-size: 16px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: #2fb2ff;
      }
    }
    .info-bottom {
      display: flex;
      img {
        width: 24px;
        height: 24px;
      }
      span {
        margin-left: 5px;
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #707787;
      }
    }
  }
}
</style>
